<!--  -->
<template>
	<el-dialog v-model="conponentDialogConfig.visible" :title="conponentDialogConfig.title">
		<el-form
			:inline="true"
			ref="ruleFormRef"
			style=""
			:model="formComponent"
			:rules="rulesComponent"
			label-width="auto"
			class="form-product"
			status-icon
			require-asterisk-position="left"
			size="small"
			:label-position="'left'"
		>
			<el-row>
				<el-col span="12">
					<el-form-item label="上一级组件" prop="code">
						<el-input v-model="formComponent.productId" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col span="12">
					<el-form-item label="组件名称" prop="name">
						<el-input v-model="formComponent.name" />
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="产品名称" prop="name">
						<el-input v-model="formComponent.productName" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row></el-row>
			<el-row>
				<el-col span="12">
					<el-form-item label="组件编码" prop="code">
						<el-input v-model="formComponent.code" />
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="产品编码" prop="code">
						<el-input v-model="formComponent.productId" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col span="12">
					<el-form-item label="技术要求" prop="code">
						<el-input v-model="formComponent.productId" />
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="技术文件" prop="code">
						<el-input v-model="formComponent.productId" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
	conponentDialogConfig: {
		type: Object,
		default: {
			visible: false,
			title: '',
		},
	},
});

const emits = defineEmits(['cancel']);

const formComponent = reactive({
	name: '',
	code: '',
	productId: '',
	productName: '',
	prev: '',
});

const rulesComponent = reactive({
	name: {
		required: true,
		message: '必填',
	},
	code: {
		required: true,
		message: '必填',
	},
	productId: {
		required: true,
		message: '必填',
	},
	productName: {
		required: true,
		message: '必填',
	},
	prev: {
		required: true,
		message: '必填',
	},
});

const cancel = () => {
	emits('cancel');
};

const save = () => {
	ElMessage({
		message: '保存成功',
		type: 'success',
	});
};
</script>
<style lang="scss"></style>
